$(function () {
  /* 
  1 页面初始化 
    1 先显示mui的下拉刷新组件
    2 同时 发送请求去获取数据
    3 请求成功了！！！ 再去结束！！！下拉刷新组件的显示！！
  2 上拉加载下一页
    1 用户上拉页面的时候 显示组件 - 默认就已经实现
    2 判断有么有下一页的数据
      假设： 总页数 totalPage （未知 总条数）  和 当前的 页码 做一个比较
        总页数 =  Math.ceil( 总条数  /  页容量 )
          假如  pagenum >=   totalPage 
                么有下一页
                不成立 下一页 
      有 加载下一页
      么有 什么都不做
    3 开始判断有没有下一页 
      没有数据 给出用户提示  xxx 不要再滑动 页面都要崩溃。。
      有数据 
        pagenum++
        调用 发送请求的方法 getGoodsSearch
    4 点击 mui刷新组件里面 a标签的 无法跳转
      1 mui自己做的一些处理
      2 为什么？？ mui 现在可以做移动web 
      也可以 打包 混合app- app 使用a标签原生跳转 不好看 不美观
        使用软件里面的一些跳转效果 
      3 现在要做的是 移动web 肯定需要a标签的点击跳转
        1 去修改源码 不建议！！ 
        2 把a标签当成是一个普通的div href属性也看成是一个普通的属性
          给a标签绑定 一个tap点击事件
            获取当前被点击的a标签的href属性
            通过js的方式来实现页面的跳转
            var href=this.href;
            location.href= href;



   */
  // 全局的 查询参数变量 方便修改
  var QueryParams = {
    // 查询关键字  可以为空字符串
    query: "",
    // 商品的分类id 从上一个页面 分类页面 来传递的！！
    // url上的参数 cid 的值 
    cid: $.getUrl("cid"),
    // 页码
    pagenum: 1,
    // 页容量  一页里面 有几条数据
    pagesize: 10
  }

  // 总页数
  var TotalPages = 1;

  // console.log(QueryParams);
  init();

  function init() {
    eventList();
    mui.init({
      pullRefresh: {
        // 置顶了容器的选择器 
        container: ".pyg_view",
        // 下拉刷新组件
        down: {
          // 自动触发  默认先显示一次 下拉刷新组件
          auto: true,
          //  触发下拉刷新时自动触发
          callback: function () {
            /* 
            0 重置页码 重新变成 1 
            0.5 重置上拉加载下一页的组件 （曾经被告诉说没有数据-> 禁用的组件，给出一行文字提示)
            1 发送请求获取数据
            2 成功了 结束下拉刷新组件！！
            
             */

            // 0 重置页码
            QueryParams.pagenum = 1;
            // 重置 上拉加载组件 -- 思路是完全正确 但是 没有效果？因为mui组件的原因导致 
            // mui('.pyg_view').pullRefresh().refresh(true);

            getGoodsSearch(function (goods) {
              // 成功
              var html = template("mainTpl", {
                arr: goods
              });
              $(".goods_list").html(html);

              // 结束下拉刷新组件
              mui('.pyg_view').pullRefresh().endPulldownToRefresh();

              // 重置上拉组件
              mui('.pyg_view').pullRefresh().refresh(true);

            });
          }
        },
        // 上拉加载下一页
        up: {
          //  触发上拉刷新时自动触发
          callback: function () {
            /* 
            1  判断有没有下一页的数据 
             */
            if (QueryParams.pagenum >= TotalPages) {
              // 没有下一页数据
              // console.log("没有下一页数据");
              // 结束上拉加载组件  没有数据传入true
              mui('.pyg_view').pullRefresh().endPullupToRefresh(true);
            } else {
              // 有数据
              QueryParams.pagenum++;
              getGoodsSearch(function (goods) {
                // 成功
                var html = template("mainTpl", {
                  arr: goods
                });
                // 加载下一页 append
                $(".goods_list").append(html);
                // 结束上拉加载组件  有数据传入false 
                mui('.pyg_view').pullRefresh().endPullupToRefresh(false);
              });
            }
          }
        }
      }
    });
    
  }

  /**
   * 绑定事件
   */
  function eventList() {
    // 给 刷新组件中的a标签绑定点击事件
    $(".goods_list").on("tap","a",function () {

      // console.log("有一条路 每一个男生走过去 都被吓一跳？？？  南京路 男惊路");
      
      // 获取a标签身上的href属性
      var href=this.href;
      location.href=href;

      
    })
  }

  /**
   * 获取商品的列表
   * 1 当执行下拉的时候  1 数据全部 替换 ->$.html()  2 结束下拉刷新组件
   * 2 当执行上拉加载下一页的时候  1  数据追加  $.append()  2  结束 上拉加载下一页的数据
   * @param {function} callback  数据请求成之后要做的逻辑 
   */
  function getGoodsSearch(callback) {
    // $.get("http://api.pyg.ak48.xyz/api/public/v1/goods/search")
    $.get("goods/search", QueryParams, function (result) {
      // console.log(result);

      // 判断 
      if (result.meta.status == 200) {
        // 计算总页数
        //         total：23    pagesize：10 = 2.3 = 3 
        TotalPages = Math.ceil(result.data.total / QueryParams.pagesize);

        // 执行callback
        callback(result.data.goods);
      } else {
        // 失败
      }

    })

  }

 

})